<script setup>
  import { reactive, onMounted, watch } from 'vue'
  import { PeriodReportPagination, UpdateReportReading } from '@/api/information/periodReport'
  import { FastShortMessage } from '@/api/information/shortMessage'
  import { ScopeVarietyList } from '@/api/information/variety'
  import { ElMessageBox } from 'element-plus';
  import { datetimeToString } from '@/utils/datetimeUtils'
  import PDFView from '@/components/PdfPreview.vue'

  const todayDate = datetimeToString(new Date())
  const dialogData = reactive({
    isShow: false,
    title: '',
    pdfUrl: '',
  })
  const reportData = reactive({
    queryLoading: false,
    keyword: '',
    varietyEn: '',
    selectType: '',
    page: 1,
    pageSize: 50,
    totalCount: 0,
    reportList: [],
    varietyList: [],
    reprtCategory: [
      {id: 0, name: '全部', key: '', active: true},
      { id: 1, name: '晨会纪要', key: 'EARLY', active: false },
      { id: 2, name: '收盘日评', key: 'DAILY', active: false },
      { id: 3, name: '每周周报', key: 'WEEKLY', active: false },
      { id: 4, name: '月度报告', key: 'MONTHLY', active: false },
      { id: 5, name: '年度报告', key: 'ANNUAL', active: false },
      { id: 6, name: '技术解盘', key: 'TECHNICAL', active: false },
      { id: 7, name: '其他', key: 'OTHERS', active: false }
    ]
  })
  // 短讯通
  const shortMsgData = reactive({
    queryLoading: false,
    page: 1,
    pageSize: 50,
    totalCount: 0,
    data: [],
  })
  
  const reportPageChange = (page) => {
    reportData.page = page
    queryReports()
  }
  const shortMsgPageChange = (page) => {
    shortMsgData.page = page
    queryShortMsg()
  }

  const reportRowClick = (row) => {
    if (row.suffix === 'PDF') {
      dialogData.pdfUrl = row.pdf_file
      dialogData.title = row.title
      dialogData.isShow = true
      UpdateReportReading(row.id)
    } else if (row.suffix === 'DOCX') {
      // 预览docx
      ElMessageBox({
        title: '提示',
        message: '该文档暂不支持预览!',
        type: 'error'
      })
      .then(() => {})
      .catch(() => {})
    }
  }

  const toGetPointFiles = (c) => {
    for (let i = 0; i< reportData.reprtCategory.length; i++) {
      reportData.reprtCategory[i].active = false
    }
    reportData.page = 1
    reportData.selectType = c.key
    c.active = true
    queryReports()
  }

  const keywordReports = () => {
    reportData.page = 1
    queryReports()
  }

  // 查询报告
  const queryReports = () => {
    reportData.queryLoading = true
    PeriodReportPagination(
      reportData.page,
      reportData.pageSize,
      reportData.selectType,
      reportData.varietyEn,
      reportData.keyword,
    ).then((res) => {
      const resData = res.data
      reportData.reportList = resData.rows
      reportData.totalCount = resData.total_count
      reportData.queryLoading = false
    })
  }

  // 查询短讯通
  const queryShortMsg = () => {
    shortMsgData.queryLoading = true
    FastShortMessage(1, shortMsgData.page, shortMsgData.pageSize)
      .then(
        (res) => {
        const resData = res.data  // 计算一下页码数
        const pageCount = parseInt((resData.total_count + resData.page_size - 1) / resData.page_size)
        if (pageCount > 20) {
          shortMsgData.pageCount = 20
        } else {
          shortMsgData.pageCount = pageCount
        }
        shortMsgData.data = resData.data.map((i) => {
          // console.log(i.msg_time.slice(0, 10) , todayDate)
          if (i.msg_time.slice(0, 10) === todayDate) {
            i.msg_time = i.msg_time.slice(11, 16)
          } else {
            i.msg_time = i.msg_time.slice(0, 16)
          }
          return i
        })
        shortMsgData.queryLoading = false
      }
    )
    .catch(() => {
      shortMsgData.queryLoading = false
    })
  }

  // 报告选择的品种变化
  watch(() => reportData.varietyEn, () => {
    reportData.page = 1
    queryReports()
  })

  onMounted(() => {
    queryReports()
    queryShortMsg()
    ScopeVarietyList('S01').then((res) => {
      reportData.varietyList = res.data.data
    })
  })

</script>
<template>
  <div class="page-content">
    <div class="title-label">
      <div class="label-item1">研报文章</div>
      <div class="label-item2">短讯通</div>
    </div>
    <div class="inforeport-content">
      <!-- 研报文章 -->
      <div class="left-pane">
        <div class="report-box">
          <div class="catetory-box">
            <div
              v-for="c in reportData.reprtCategory"
              :key="c.id"
              :class="c.active ? 'cat-item-active' : 'cat-item'"
              @click="toGetPointFiles(c)"
            >
              {{ c.name }}
            </div>
          </div>
          <el-table
            v-loading="reportData.queryLoading"
            border
            stripe 
            class="report-table" 
            empty-text="暂无相关研报"
            :data="reportData.reportList"
          >
            <el-table-column label="品种" prop="variety_name" width="130">
              <template #header>
                <el-select
                  v-model="reportData.varietyEn"
                  filterable
                  clearable
                  placeholder="品种"
                >
                  <el-option v-for="v in reportData.varietyList"
                    :key="v.code"
                    :value="v.code"
                    :label="`${v.name} (${v.code})`"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="标题" prop="title" show-overflow-tooltip>
              <template #header>
                <div class="search-title">
                  <div class="title-span">标题</div>
                  <el-input
                    v-model="reportData.keyword"
                    clearable
                    placeholder="搜索研报"
                    @change="keywordReports"
                  />
                  <el-icon @click="keywordReports"><Search /></el-icon>
                </div>
              </template>
              <template #default="scope">
                <div class="row-title">
                  <el-icon><svg-icon :name="scope.row.file_icon"></svg-icon></el-icon>
                  <div class="title" @click="reportRowClick(scope.row)">
                    <a>{{ scope.row.title }}</a>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="类别" prop="file_type_name" width="75" />
            <el-table-column label="日期" prop="file_date"  width="90" />
          </el-table>
        </div>
      </div>
      <!-- 短讯通 -->
      <div class="right-pane" v-loading="shortMsgData.queryLoading">
        <el-scrollbar>
          <div>
            <div class="info-box">
              <div v-for="s in shortMsgData.data" :key="s.id" class="info-item">
                <div class="time-box">
                  <el-icon><Clock /></el-icon>
                  <div>{{ s.msg_time }}</div>
                </div>
                <div>{{ s.content }}</div>
              </div>
            </div>
          </div>
          <div v-if="shortMsgData.data.length < 1">
            <el-empty description="暂无短讯通数据" />
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="paginator-box">
      <div class="paginator1">
        <el-pagination
          small
          background
          layout="total,prev,pager,next"
          :page-size="reportData.pageSize"
          :total="reportData.totalCount"
          @current-change="reportPageChange"
        />
      </div>
      <div class="paginator2">
        <el-pagination
          small
          background
          layout="prev,pager,next"
          :total="shortMsgData.totalCount"
          :page-size="shortMsgData.pageSize"
          :page-count="shortMsgData.pageCount"
          @current-change="shortMsgPageChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogData.isShow"
      top="10vh"
      width="65%"
      :title="dialogData.title"
    >
      <div class="report-dialog-container">
        <PDFView :pdfUrl=dialogData.pdfUrl />
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
  .report-dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .page-content {
    min-height: calc(100vh - #{$navbar-height} - 42px);
    background-color: #fff;
    .title-label {
      display: flex;
      height: 24px;
      font-style: italic;
      line-height: 24px;
      margin-top: 2px;
      .label-item1 {
        display: flex;
        align-items: center;
        color: #fff;
        background: linear-gradient(to right, #ed5729, #fff);
        // background-color: #0078d4;
        padding: 2px 8px;
        width: 904px;
        margin-right: 10px;
        .el-icon {
          margin-left: 4px;
          cursor: pointer;
          &:hover {
            color: #ed5a2d;
          }
        }
      }
      .label-item2 {
        color: #fff;
        background: linear-gradient(to right, #ed5729, #eee);
        // background-color: #0078d4;
        padding: 2px 8px;
        width: 500px;
        display: flex;
        align-items: center;
      }
    }
    .paginator-box {
      display: flex;
      align-items: center;
      height: 40px;
      .paginator1 {
        width: 890px;
        margin-right: 10px;
      }
      .paginator2 {
        width: 500px;
      }
    }
  
    .inforeport-content {
      display: flex;
      min-height: calc(100vh - #{$navbar-height} - 66px);
      .paginator {
        margin: 10px;
      }
      .left-pane {
        width: 890px;
        height: calc(100vh - #{$navbar-height} - 106px);
        margin-right: 10px;
        // box-shadow: 0 0 10px #eee;
        background-color: #fff;
        .report-box {
          .catetory-box {
            display: flex;
            align-items: center;
            height: 24px;
            .cat-item {
              font-size: 14px;
              padding: 2px 4px;
              cursor: pointer;
              user-select: none;
              &:hover {
                color: #0086d1;
              }
              &-active {
                font-size: 14px;
                padding: 2px 4px;
                color: $goldenColor;
                cursor: pointer;
              }
            }
          }
          .report-table {
            height: calc(100vh - 130px);
             ::v-deep(.el-input__wrapper){
              border-radius: 0;
              box-shadow: 0 0 0 0 !important;
              border-bottom: 1px solid #fff;
              &:hover {
                box-shadow: 0 0 0 0;
                border-bottom: 1px solid #eee;
              }
            }
            .search-title {
              display: flex;
              align-items: center;
              .title-span {
                width: 50px;
              }
              .el-icon {
                cursor: pointer;
                margin-left: 20px;
                margin-right: 10px;
              }
            }
          }
          .row-title{
            display: flex;
            align-items: center;
            cursor: pointer;
            .title a {
              margin-left: 4px;
              text-decoration: none;
              color: #000;
              font-size: 13px;
              &:hover {
                color: $goldenColor;
              }
            }
          }
        }
      }
      .right-pane {
        width: 498px;
        height: calc(100vh - #{$navbar-height} - 67px);
        border: 1px solid #eee;
        border-top: 0;
        .info-box {
          .info-item {
            padding: 10px;
            font-size: 14px;
            border-bottom: 1px solid #eee;
            line-height: 28px;
            &:last-child {
              border-bottom: 0;
            }
            &:hover {
              color: #0086d1;
              background-color: #f3f3f3;
            }
            .el-icon {
              color: #0078d4;
              margin-right: 4px;
            }
            .time-box {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
</style>